<template>
	<view class="wrap wrap-gHeader">
		<view class="t-header app_gHeaderFixed">
			<g-header title="选择制单人" rtype="add" @rightclick="onSkipTap('addDocMaker')"></g-header>
		</view>
		<!-- <view class="header">
			<view class="header-back">
				<image src="../../static/images/icon-back.png"></image>
			</view>
			<view class="header-title">选择制单人</view>
			<view class="header-add">
				<image src="../../static/images/icon-sales-add.png"></image>
			</view>
		</view> -->
		<view class="list" v-if="list.length > 0">
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="index"
				@click="onDelTap" :options="options" @content-click="onSkipTap('back', index)" @open="onOpen">
				<view class="item app_arrow">
					{{item.name}}
				</view>
			</u-swipe-action>
		</view>
		<no-data v-if="list.length == 0 && hasLoad"></no-data>
		<no-more v-if="page > 1 && noMore"></no-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				size: 15,
				hasLoad: false,
				noMore: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#ff3333'
					}
				}]
			}
		},
		onLoad(options) {
			this.updatePage()
		},
		onUnload() {
			uni.$off('update-docMakerList', this.updatePage)
		},
		onPullDownRefresh() {
			this.updatePage()
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			updatePage() {
				this.resetPage()
				this.getList()
			},
			resetPage() {
				this.list = []
				this.page = 1
				this.size = 15
				this.hasLoad = false
				this.noMore = false
			},
			onSkipTap(type, params) {
				const urlObj = {
					addDocMaker: () => {
						uni.$off('update-docMakerList', this.updatePage)
						uni.$on('update-docMakerList', this.updatePage)
						uni.navigateTo({
							url: '/pages/salesManagerment/addDocMaker'
						})
					},
					back: () => {
						uni.$emit('update-addSalesOrderdocMaker', this.list[params])
						uni.navigateBack()
					}
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			getList() {
				this.$g_api.saleslipGetAuthors({
					pageNum: this.page,
					pageSize: this.size
				}).then(({
					data
				}) => {
					this.hasLoad = true
					if (data.length > 0) {
						data.forEach(item => {
							item.show = false
						})
						this.list = this.list.concat(data)
					} else {
						this.noMore = true
					}
				})
			},
			onDelTap(index) {
				this.$g_api.saleslipDelAuthor({
					id: this.list[index].id
				}).then(() => {
					uni.showToast({
						title: '删除成功'
					})
					this.updatePage()
				})
			},
			onOpen(index) {
				this.list.forEach((item, idx) => {
					item.show = index == idx
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-top: calc(var(--status-bar-height) + 98rpx + 20rpx);
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 98rpx;
		padding-top: var(--status-bar-height);
		box-sizing: content-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		background-color: #fff;
		z-index: 10086;
	}

	.header-back {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100rpx;
		height: 60rpx;
		padding-left: 30rpx;

		image {
			width: 16rpx;
			height: 28rpx;
		}
	}

	.header-add {
		width: 100rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 34rpx;
			height: 34rpx;
		}
	}

	.list {
		background-color: #fff;
	}

	.item {
		width: 750rpx;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid $g-border-color;

		&::after {
			width: 14rpx;
			height: 14rpx;
			right: 38rpx;
		}
	}
</style>
